<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="学生" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.student_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="学号" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.student_num }}</span>
        </template>
      </el-table-column>
      <el-table-column label="专业" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.student_class }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开题报告" width="180">
        <template slot-scope="scope">
          <el-link to="" type="primary" @click="download(scope.row)">
            {{ scope.row.report_name }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="180">
        <template slot-scope="scope">
          {{ scope.row.status }}
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
            通过
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹出框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="意见" prop="desc">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="true_pass()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  created() {
    this.get_report();
  },
  data() {
    return {
      status: [],
      form: {},
      dialogVisible: false,
      tableData: [],
      num: {},
      rules: {
        desc: { required: true, message: "必填", trigger: "blur" },
      },
    };
  },
  methods: {
    get_report() {
      this.$http.get("http://127.0.0.1:8080/teacher/get_report").then((res) => {
        if (res.data.status == 0) {
          res.data.data.resul.forEach((val) => {
            res.data.data.result.forEach((value) => {
              if (val.student_num == value.student_num) {
                Object.assign(value, {
                  student_name: val.student_name,
                  student_class: val.student_class,
                });
              }
            });
          });
          this.tableData = res.data.data.result;
          console.log(res.data.data);
          res.data.data.result.forEach((val) => {
            if (val.report_status == 0) {
              Object.assign(val, { status: "未通过" });
            } else {
              Object.assign(val, { status: "通过" });
            }
          });
        } else {
          return (this.tableData = []);
        }
      });
    },
    download(row) {
      // console.log(row);
      location.href = "http://127.0.0.1:8080/api/download?id=" + row.id;
    },

    // 通过按钮
    handleEdit(index, row) {
      this.dialogVisible = true;
      this.num = row;
      console.log(index, row);
    },

    // 通过开题报告
    true_pass() {
      this.dialogVisible = false;
      const n = { ...this.form, ...this.num };
      //   console.log(n);
      this.$http
        .post(
          "http://127.0.0.1:8080/teacher/pass_report",
          this.$qs.stringify(n)
        )
        .then((res) => {
          this.get_report();
          this.form = {};
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
  },
};
</script>
<style lang="less" scoped>
</style>
